<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="el-icon-s-order"></i>
        <span>{{ $t("system.host_batch") }}</span>
      </h2>
    </template>
    <template v-slot:global-button>
      <el-button class="kylin-button" @click="downloadTemplate">{{
        $t("excel_template_download")
      }}</el-button>
    </template>
    <template v-slot:content>
      <el-dialog
        :title="title"
        :visible.sync="display"
        :before-close="handleClose"
      >
        <import-batch
          @click="handleClose"
          v-if="type === 'import_batch'"
        ></import-batch>
        <delete
          @click="handleClose"
          v-else-if="type === 'delete'"
          :content="delete_content"
          :handleCancel="handleClose"
          :handleOk="handleDeleteOk"
        >
        </delete>
      </el-dialog>
      <ky-table
        :search_data="search_data"
        :getData="getBatchList"
        :showSelect="showSelect"
        :search_criteria="search_criteria"
        ref="table"
      >
        <template v-slot:table-action>
          <authorization-button class="kylin-item-button" @click="handleImport" name="batches:create"
            >{{ $t("import") }}
          </authorization-button>
          <el-dropdown trigger="click" v-if="displayDropdown">
            <el-button
              class="kylin-item-button"
              :disabled="$refs.table && $refs.table.selectRow.ids.length == 0"
            >
              {{ $t("action")
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" ref="dropdown">
              <authorization-dropdown-item @click.native="handleDelete" name="batches:delete">{{
                $t("delete")
              }}</authorization-dropdown-item>
              <authorization-dropdown-item @click.native="handleDowndload" name="batches:downloadBatches">{{
                $t("system.export_select")
              }}</authorization-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template v-slot:table>
          <el-table-column :label="$t('system.batch_name')">
            <template slot-scope="scope">
              <router-link :to="$route.path + scope.row.id">
                {{ scope.row.name }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" :label="$t('create_time')">
          </el-table-column>
          <el-table-column
            prop="osInfo"
            width="270"
            :label="$t('system.operating_system')"
          >
          </el-table-column>
          <el-table-column prop="osArch" :label="$t('system.architecture')">
          </el-table-column>
          <el-table-column prop="userName" :label="$t('operate_user')">
          </el-table-column>
          <el-table-column prop="description" :label="$t('description')">
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import { getBatchList, downloadBatch, deleteBatch } from "@/api/batch";
import { downloadTemplate } from "@/api/template";
import Delete from "@/components/Delete";
import ImportBatch from "./form/importBatch.vue";
import { download } from "@/utils";
import AuthorizationButton from "@/components/AuthorizationButton";
import AuthorizationDropdownItem from "@/components/AuthorizationDropdownItem";
export default {
  name: "host_batch",
  components: {
    Page,
    kyTable,
    ImportBatch,
    Delete,
    AuthorizationButton,
    AuthorizationDropdownItem,
  },
  data() {
    return {
      display: false,
      showSelect: true,
      search_criteria: {
        sortBy: "id",
        sortOrder: "desc",
      },
      displayDropdown: true,
      title: "",
      type: "",
      delete_content: "",
      search_data: {
        name: {
          name: "system.batch_name",
          type: "text",
        },
        createdAt: {
          name: "create_time",
          type: "date",
        },
        osInfo: {
          name: "system.operating_system",
          type: "select",
          items: [
            {
              key: "中标麒麟高级服务器操作系统V7.0",
              name: "中标麒麟高级服务器操作系统V7.0",
            },
            {
              key: "银河麒麟高级服务器操作系统V10(SP1)",
              name: "银河麒麟高级服务器操作系统V10(SP1)",
            },
            {
              key: "银河麒麟高级服务器操作系统V10(SP2)",
              name: "银河麒麟高级服务器操作系统V10(SP2)",
            },
          ],
        },
        osArch: {
          name: "system.architecture",
          type: "select",
          items: [
            {
              key: "aarch64",
              name: "aarch64",
            },
            {
              key: "x86_64",
              name: "x86_64",
            },
          ],
        },
        userName: {
          name: "operate_user",
          type: "select",
          items: [{ key: "admin", name: "admin" }],
        },
        description: {
          name: "description",
          type: "text",
        },
      },
    };
  },
  activated() {
      this.$refs.table.handleSearch();
  },
  methods: {
    getBatchList,
    async getSelectAllIds() {
      let data = [];
      const res = await getBatchList({
        ...this.$route.query,
        paged: false,
      });
      res.data.data.results.map((item) => {
        if (!this.$refs.table.selectRow.excludeIds.includes(item.id)) {
            data.push(item.id);
        }
      });
      return data;
    },
    async handleDowndload() {
      let ids = [];
      if (this.$refs.table.select_id == "2") {
        ids = await this.getSelectAllIds();
      } else {
        ids = this.$refs.table.selectRow.ids;
      }
      let res = await downloadBatch(ids);
      download(res, "batch");
    },
    handleDelete() {
      this.display = true;
      this.type = "delete";
      this.title = this.$t("system.delete_batch");
      let arr = [];
      let str = "";
      if (this.$refs.table.select_id == "2") {
        str = this.$refs.table.select_number.toString();
      }
      this.$refs.table.selectRow.rows.map(function (row) {
        arr.push(row.name);
        str = arr.toString();
      });
      this.delete_content = this.$t("system.delete_batch_content").replace(
        "%s",
        str
      );
    },
    handleImport() {
      this.display = true;
      this.type = "import_batch";
      this.title = this.$t("system.import_batch");
    },
    handleClose(type) {
      this.display = false;
      this.title = "";
      this.type = "";
      if (type === "success") {
        this.$refs.table.handleSearch();
      }
    },
    async handleDeleteOk() {
      let ids = [];
      if (this.$refs.table.select_id == "2") {
        ids = await this.getSelectAllIds();
      } else {
        ids = this.$refs.table.selectRow.ids;
      }
      let res = await deleteBatch(ids);
      if (res.data.code == "0") {
        this.$message({
          type: "success",
          message: res.data.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.data.message,
        });
      }
      this.$refs.table.handleSearch();
      this.display = false;
      this.title = "";
      this.type = "";
    },
    downloadTemplate() {
      downloadTemplate("batches_template").then((res) => {
        download(res, "batches_template");
      });
    },
  },
  mounted() {
      if (this.$refs.dropdown) {
        let children = this.$refs.dropdown.$children;
        let arr = children.filter((child) => {
          return child.display;
        });
        this.displayDropdown = arr.length > 0 ? true : false;
      }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.size {
  width: 134px;
}
.label {
  font-weight: 600;
  margin-right: 10px;
}
</style>